<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <div>
    <div class="pointer-events-none absolute inset-0 z-0 rounded-2xl bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:-inset-y-6" />
    <Link :href="to || href">
      <span class="absolute inset-0 z-20 rounded-2xl sm:-inset-x-6 sm:-inset-y-6" />
      <span class="relative z-10">
        <slot />
      </span>
    </Link>
  </div>
</template>

<script>
export default {
  name: 'CardLink',
  props: ['to', 'href']
}
</script>
